<template>
	<view class="pages">
		<!-- 退款是否成功 -->
		<view class="refuTit">
			<view class="tit">{{detail.status == 0 ? '待审核' : (detail.status == 1?'已驳回':'已退款')}}</view>
			<text class="time" v-if="detail.status==1">驳回原因：{{detail.cause}} </text>
			<view class="time" v-if="detail.status == 2">审核时间：{{detail.audit_time}}</view>
		</view>
		<!-- 退款金额 -->
		<view class="refList">
			<view class="row">
				<view class="name">退款总金额</view>
				<view class="price">￥{{detail.drawback.back_money}}</view>
			</view>
		</view>
		<!-- 退款信息 -->
		<view class="refInfo">
			<view class="title">退款信息</view>
			<block v-for="(item,index) in detail.detail" :key="item.id">
				<view class="goods">
					<view class="img"><image :src="item.image" mode=""></image></view>
					<view class="cont">
						<view class="tit">{{item.goods_name}}</view>
						<view class="ftit">{{item.goods_spec}}</view>
						<view class="flex">
							<view class="price">￥{{item.price_sell}}</view>
							<view class="num">x {{item.nums}}</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 退款详情 -->
			<view class="detail">
				
				<view class="list">
					<view class="info">退款编号 :</view>
					<view class="note">{{detail.number}}</view>
				</view>
				
				<view class="list">
					<view class="info">订 单 号 :</view>
					<view class="note">{{detail.oid}}</view>
				</view>
				
				<view class="list">
					<view class="info">退款原因 :</view>
					<view class="note">{{detail.reason}}</view>
				</view>
				<view class="list">
					<view class="info">退款描述 :</view>
					<view class="note">{{detail.remark}}</view>
				</view>
				
				<view class="list">
					<view class="info">申请时间 :</view>
					<view class="note">{{detail.create_time}}</view>
				</view>
				
				<view class="list">
					<view class="info">证 据 图 :</view>
					<view class="note">
						<view class="img"><image style="height: 60px;width: 60px;border:1px solid #ccc;padding: 1px;" :src="image" mode="" v-for="image in detail.image"></image></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	export default {
		data(){
			return{
				number:'',
				detail:''
			}
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		onLoad(options) {
			this.number = options.number
			this.getData()
		},
		methods:{
			getData(){
				var that = this
				let _param = {
					token:that.userInfo.token,
					number:that.number
				}
				that.$api.getUrl(that.$api._api.ApiReturnDetail,_param,function(res){
					that.detail = res
				})
			}
		}
	}
</script>
<style lang="scss">
	.pages{background:#fff;margin-top: 1px;}
	// 退款状态
	.refuTit{
		background: #f04447;color:#fff;padding:40rpx 30rpx;
		.tit{font-size: 30rpx;}
		.time{font-size: 24rpx;opacity: 0.8;margin-top: 10rpx;}
	}
	// 退款金额
	.refList{
		padding: 0 30rpx;
		.row{display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 26rpx;
			.name{flex: 1;color:#888;}
			.price{color:#f04447;}
			.money{color:#333;}
			.start{color:#1ac12e;}
		}
		.row:not(:last-child){border-bottom: 1px solid #eee;}
	}
	// 退款信息
	.refInfo{
		border-top:20rpx solid #eee;padding: 20rpx 0;
		.title{padding: 0 30rpx;font-size:30rpx;font-weight: bold;height:70rpx;line-height:70rpx;}
		// 商品信息
		.goods{
			display: flex;margin-top: 1px;padding:30rpx;
			.img{width:220rpx;height:220rpx;overflow: hidden;border-radius: 6rpx;image{width: 100%;height: 100%;}}
			.cont{margin-left: 20rpx;flex: 1;}
			.tit{font-size: 30rpx;color:#555;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;
				-webkit-box-orient:vertical;-webkit-line-clamp:2
				}
			.ftit{font-size: 26rpx;color:#999;margin-top:15rpx;}
			.flex{margin-top:30rpx;align-items: center;
				.price{flex: 1;color:#f04447;font-size: 32rpx;font-weight: bold;}
				.num{color: #999;}
			}
		}
		// 退款详情
		.detail{
			padding: 30rpx;border-top: 1px dashed #eee;
			.list{display: flex;font-size:25
			rpx;color:#999;line-height:50rpx;}
			.info{width:130rpx;}
		}
	}
	.btns{background:#f04447;position: fixed;bottom: 0;left: 0;right: 0;color:#fff;text-align: center;
		height: 100rpx;line-height: 100rpx;font-size: 30rpx;}
	.btns text{margin-right: 10rpx;font-size:32rpx;}
</style>
